
<template>
    <div class="pa-request-list">
        <Card :shadow="true" class="margin-bottom-10">
            <Row>
                <Col span="3">
                    <Input v-model="searchApp" style="width:90%" placeholder="PHP实例应用名称"></Input>
                </Col>
                <Col span="5">
                    <Input v-model="searchReqUrl" style="width:95%" placeholder="请求地址"></Input>
                </Col>
                <Col span="10">
                    <Row>
                        <Col span="6">
                            <DatePicker style="width:98%" type="date" placeholder="开始日期" v-model="searchReqStartDate"></DatePicker>
                        </Col>
                        <Col span="5">
                            <TimePicker style="width:98%" confirm placeholder="开始时间" v-model="searchReqStartTime"></TimePicker>
                        </Col>
                        <Col span="1" style="text-align: center">-</Col>
                        <Col span="6">
                            <DatePicker style="width:98%" type="date" placeholder="结束日期" v-model="searchReqEndDate"></DatePicker>
                        </Col>
                        <Col span="5">
                            <TimePicker style="width:98%" confirm placeholder="结束时间" v-model="searchReqEndTime"></TimePicker>
                        </Col>
                    </Row>
                </Col>
                <Col span="3">
                    <Select style="width:90%" v-model="searchOrder" placeholder="选择排序">
                        <Option value="cost_time">最耗时请求</Option>
                        <Option value="request_time">最新请求</Option>
                    </Select>
                </Col>
                <Col span="2">
                    <Button @click="startSearchEvent" type="info">搜索</Button>
                </Col>
            </Row>
        </Card>
        <Card :shadow="true">
            <Table :row-class-name="rowClassName" :loading="tableLoading" class="margin-bottom-10" :columns="tableColumns" :data="tableDatas"></Table>
            <Page :total="totalPage" :page-size-opts="[10, 20, 50, 100]" :page-size="perPageSize" show-sizer @on-page-size-change="changePageSize" @on-change="currentPageOnChange"></Page>
        </Card>
    </div>
</template>

<script>

    import Util from '@/libs/util.js';
    import { GetRequestUrlListApi }  from '@/libs/api.js';

    let getYesterDay = function () {
        let now = new Date();
        now.setDate(now.getDate() - 1);
        return now;
    }

    export default {
        data () {
            return {
                searchApp: '',
                searchReqUrl: "",
                searchReqStartDate: getYesterDay(),
                searchReqEndDate: "",
                searchReqStartTime: "",
                searchReqEndTime: "",
                searchOrder: 'request_time',
                perPageSize: 10,
                totalPage: 0,
                tableLoading: false,
                currentPage: 1,
                tableColumns: [
                    {
                        title: '请求方法',
                        key: 'method',
                        width: 100
                    },
                    {
                        title: '请求地址',
                        key: 'url',
                        render: (h, params) => {
                            return h('router-link', {
                                props: {
                                    to: {
                                        name: "detail",
                                        query: {'request-id': params.row.request_id}
                                    }
                                }
                            }, params.row.host + params.row.url);
                        }
                    },
                    {
                        title: '应用',
                        key: 'app',
                        width: 100,
                        align: 'center'
                    },
                    {
                        title: '请求时间',
                        key: 'request_time',
                        width: 150,
                        align: 'center'
                    },
                    {
                        title: '执行时间',
                        key: 'cost_time',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return Util.addMicrotimeUnit(params.row.cost_time);
                        }
                    },
                    {
                        title: 'CPU时间',
                        key: 'cpu_time',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return Util.addMicrotimeUnit(params.row.cpu_time);
                        }
                    },
                    {
                        title: '内存使用',
                        key: 'memory',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return Util.addMemoryUnit(params.row.memory);
                        }
                    },
                    {
                        title: '内存峰值',
                        key: 'pmemory',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            return Util.addMemoryUnit(params.row.pmemory);
                        }
                    }
                ],
                tableDatas: []
            }
        },
        methods: {

            init() {
                this.getRequestListApi();
            },

            changePageSize(size) {
                this.perPageSize = size;
            },

            currentPageOnChange(page) {
                this.getRequestListApi(page);
            },

            startSearchEvent() {
                this.getRequestListApi(1);
            },

            getRequestListApi(page) {
                this.tableLoading = true;
                if (page) {
                    this.currentPage = page;
                }
                let offset = this.perPageSize * (this.currentPage - 1);
                let params = {
                    req_app: this.searchApp,
                    req_url: this.searchReqUrl,
                    req_start_date: this.searchReqStartDate,
                    req_start_time: this.searchReqStartTime,
                    req_end_date: this.searchReqEndDate,
                    req_end_time: this.searchReqEndTime,
                    req_order: this.searchOrder,
                    limit: this.perPageSize,
                    offset
                };
                GetRequestUrlListApi(params).then((res) => {
                    if (res.errno) {
                        this.$Message.error("Internet server error:" + res.message);
                    } else {
                        this.tableDatas= res.data.list;
                        this.totalPage = res.data.total;
                        this.tableLoading = false;
                    }
                }).catch((err) => {
                    this.$Message.error("Network error:" + err);
                });
            },

            rowClassName (row, index) {
                if (!row.method) {
                    return '';
                }
                if (row.execute_time > 5000) {
                    return 'table-error-row';
                } else if (row.execute_time > 2500) {
                    return 'table-warning-row';
                }
                return '';
            }
        },
        mounted () {
            this.init();
        }
    }
</script>